import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('../views/home/Home.vue')
    },
    {
        path: '/component',
        children: [
            {
                path: '/component/component',
                name: 'component',
                component: () => import('../views/component/Component.vue')
            },
            {
                path: '/component/progress',
                name: 'progress',
                component: () => import('../views/component/Progress.vue')
            }
        ]
    },
    {
        path: '/translation',
        name: 'translation',
        component: () => import('../views/translation/Translation.vue')
    },
    {
        path: '/reactive',
        name: 'reactive',
        component: () => import('../views/reactive/Reactive.vue')
    },
    {
        path: '/html',
        name: 'html',
        children: [
            {
                path: '/html/form',
                name: 'form',
                component: () => import('../views/htmlTest/Form.vue')
            },
            {
                path: '/html/list',
                name: 'list',
                component: () => import('../views/htmlTest/List.vue')
            },
            {
                path: '/html/drag',
                name: 'drag',
                component: () => import('../views/htmlTest/Drag.vue')
            }
        ]
    },
    {
        path: '/css',
        name: 'css',
        children: [
            {
                path: '/css/clip-path',
                name: 'clip-path',
                component: () => import('../views/cssTest/ClipPath.vue')
            },
            {
                path: '/css/fit-content',
                name: 'fit-content',
                component: () => import('../views/cssTest/FitContent.vue')
            },
            {
                path: '/css/gradient',
                name: 'gradient',
                component: () => import('../views/cssTest/Gradient.vue')
            },
            {
                path: '/css/border',
                name: 'border',
                component: () => import('../views/cssTest/Border.vue')
            },
            {
                path: '/css/gradient',
                name: 'gradient',
                component: () => import('../views/cssTest/Gradient.vue')
            },
            {
                path: '/css/border',
                name: 'border',
                component: () => import('../views/cssTest/Border.vue')
            },
            {
                path: '/css/mix-blend-mode',
                name: 'mix-blend-mode',
                component: () => import('../views/cssTest/Mix-blend-mode.vue')
            },
            {
                path: '/css/background-blend-mode',
                name: 'background-blend-mode',
                component: () => import('../views/cssTest/Background-blend-mode.vue')
            },
            {
                path: '/css/cross-fade',
                name: 'cross-fade',
                component: () => import('../views/cssTest/Cross-fade.vue')
            },
            {
                path: '/css/mask',
                name: 'mask',
                component: () => import('../views/cssTest/Mask.vue')
            },
            {
                path: '/css/cssvariable',
                name: 'cssvariable',
                component: () => import('../views/cssTest/CSSVariable.vue')
            },
            {
                path: '/css/animation',
                name: 'animation',
                component: () => import('../views/cssTest/Animation.vue')
            },
            {
                path: '/css/auto-color',
                name: 'autocolor',
                component: () => import('../views/cssTest/AutoColor.vue')
            },
            {
                path: '/css/stacking',
                name: 'autocolor',
                component: () => import('../views/cssTest/Stacking.vue')
            },
        ]
    },
    {
        path: '/js',
        name: 'js',
        children: [
            {
                path: '/js/selection',
                name: 'selection',
                component: () => import('../views/jsTest/Selection.vue')
            },
            {
                path: '/js/stringtodom',
                name:'strToDom',
                component: () => import('../views/jsTest/StrToDom.vue')
            }
        ]
    },
    {
        path: '/leafer',
        name: 'leafer',
        children: [
            {
                path: '/leafer/line',
                name: 'line',
                component: () => import('../views/leafer/Line.vue')
            }
        ]
    },
    {
        path: '/flex',
        children: [
            {
                path: '/flex/autosize',
                name: 'autosize',
                component: () => import('../views/layouts/flex/AutoSize.vue')
            },
            {
                path: '/flex/flex',
                name: 'flex',
                component: () => import('../views/layouts/flex/Flex.vue')
            }
        ]
    },
    {
        path: '/grid',
        name: 'grid',
        children: [
            {
                path: '/grid/base',
                name: 'gridBase',
                component: () => import('../views/layouts/grid/Base.vue')
            }
        ]
    },
    {
        path: '/columns',
        name: 'columns',
        children: [
            {
                path: '/columns/base',
                name: 'columnsBase',
                component: () => import('../views/layouts/columns/Base.vue')
            },
            {
                path: '/columns/book',
                name: 'columnsbook',
                component: () => import('../views/layouts/columns/Book.vue')
            }
        ]
    },
    {
        path: '/svg',
        children: [
            {
                path: '/svg/path',
                name: 'path',
                component: () => import('../views/svg/Path.vue')
            }
        ]
    },
    {
        path: '/canvas',
        children: [
            {
                path: '/canvas/template',
                name: 'template',
                component: () => import('../views/canvas/template/Template.vue')
            },
            {
                path: '/canvas/arrow',
                name: 'arrow',
                component: () => import('../views/canvas/example/Arrow.vue')
            },
            {
                path: '/canvas/autowrap',
                name: 'arrow',
                component: () => import('../views/canvas/example/TextAutoWrap.vue')
            }
            
        ]
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router